import React, { PureComponent } from 'react';
import { Select } from 'antd';
import PropTypes from 'prop-types';

const { Option } = Select;

class AdvancedSelect extends PureComponent {
  static propTypes = {
    dataSource: PropTypes.array.isRequired, // 下拉列表框的数据源
    onChange: PropTypes.func.isRequired, // 发生改变时的操作
    fieldConfig: PropTypes.object, // 数据源选择
    searchType: PropTypes.string, // 目前提供了本地查询和模糊查询两种模式
    searchField: PropTypes.string, // 查询时的字段
  };

  /*
  实现下拉列表框的封装，封装功能为载入数据后
  fieldConfig:
  searchConfig,
   */

  constructor(props) {
    super(props);
    this.state = {
      value: props.value || '',
      optionData: [],
      currentConfig: {},
      searchField: props.searchField || 'text',
    };
    this.SEARCH_CONFIG_OBJ = {
      NOSEARCH: {},//不进行查询
      FUZZYSEARCH: {
        onSearch: v => this.handleSearch(v, this.state.searchField),
        showSearch: true,
        optionFilterProp: 'children',
        filterOption: false,
      },
    };
    this.DEFAULT_FILED_CONFIG = {
      key: 'value',
      value: 'value',
      text: 'text',
    };
  }

  componentWillReceiveProps(nextProps) {
    const { currentConfig: originConfig } = this.state;
    if ('value' in nextProps && this.props.value !== nextProps.value) {
      this.setState({
        value: nextProps.value,
      });
    }

    if ('dataSource' in nextProps && this.props.dataSource.length !== nextProps.dataSource.length) {
      this.setState({ optionData: nextProps.dataSource });
    }
  }

  componentDidMount() {
    const { dataSource, fieldConfig = this.DEFAULT_FILED_CONFIG, searchType = 'NOSEARCH' } = this.props;
    console.log(dataSource);
    const config = {
      fieldConfig,
      searchConfig: this.SEARCH_CONFIG_OBJ[searchType],
    };
    this.setState({
      currentConfig: config,
      optionData: dataSource,
    });
  }

  handleChange = (value) => {
    this.setState({ value });
    const { onChange } = this.props;
    if (onChange) {
      onChange(value);
    }
  };

  handleLocalSearch = (input, option) => {
    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
  };

  handleSearch = (value, searchField) => {
    const { dataSource } = this.props;
    const res = dataSource.filter((v) => {
      if (v[searchField]) {
        return v[searchField].toLowerCase().indexOf(value.toLowerCase()) != -1;
      } else {
        console.log('AdvancedSelect组件中handleSearch函数出错，请设置正确的searchField');
        return v;
      }

    });
    this.setState({ optionData: res });
  };

  constructOptions = () => {
    const { optionData, currentConfig } = this.state;
    const { fieldConfig } = currentConfig;
    if (fieldConfig) {
      return optionData.map((item) => {
        return (
          <Option
            id={item[fieldConfig.text]}
            key={item[fieldConfig.key]}
            value={item[fieldConfig.value]}
          >
            {item[fieldConfig.text]}
          </Option>
        );
      });
    }
  };

  render() {
    const { currentConfig: { searchConfig } } = this.state;
    const { dataSource, onChange, ...otherProps } = this.props;
    const config = { ...searchConfig, ...otherProps };// 允许其他设置
    return (
      <Select value={this.state.value} onChange={this.handleChange} {...config} style={{ width: '100%' }}>
        {this.constructOptions()}
      </Select>
    );
  }
}

export default AdvancedSelect;
